<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <NavBar :showBack="true" :userName="userName" :isLoggedIn="!!userName" title="故事收集" />

        <!-- 全局录音控制器 -->
        <view class="recorder-container global">
            <view class="recorder-controls">
                <view class="recorder-button" @click="toggleRecording">
                    <text v-if="isRecording" class="iconfont icon-stop">■</text>
                    <text v-else class="iconfont icon-mic">●</text>
                </view>
                <view class="recorder-info">
                    <text class="recorder-status">{{ isRecording ? '正在录音整个故事...' : '点击开始录制您的完整故事' }}</text>
                    <text v-if="isRecording" class="recorder-timer">{{ recordingTime }}</text>
                </view>
            </view>
        </view>

        <!-- 主要内容区 -->
        <scroll-view scroll-y class="main-content">
            <!-- 步骤指示器 -->
            <view class="steps-indicator">
                <view v-for="(step, index) in steps" :key="index" class="step-item"
                    :class="{ 'active': currentStep >= index, 'current': currentStep === index }">
                    <view class="step-number">{{ index + 1 }}</view>
                    <text class="step-text">{{ step }}</text>
                </view>
            </view>

            <!-- 基本信息部分 -->
            <view v-if="currentStep === 0" class="section">
                <view class="section-header">
                    <text class="section-title">基本信息</text>
                    <text class="section-subtitle">请填写个人简介</text>
                </view>
                <view class="form-container">
                    <input type="text" v-model="basicInfo.name" placeholder="姓名" class="input-field" />
                    <view class="radio-group">
                        <text class="radio-label">性别：</text>
                        <view class="radio-options">
                            <view class="radio-option" @click="basicInfo.gender = '男'"
                                :class="{ 'selected': basicInfo.gender === '男' }">
                                <text>男</text>
                            </view>
                            <view class="radio-option" @click="basicInfo.gender = '女'"
                                :class="{ 'selected': basicInfo.gender === '女' }">
                                <text>女</text>
                            </view>
                        </view>
                    </view>
                    <input type="number" v-model="basicInfo.age" placeholder="年龄" class="input-field" />
                    <input type="text" v-model="basicInfo.birthplace" placeholder="出生地" class="input-field" />
                    <input type="text" v-model="basicInfo.currentPlace" placeholder="现居地" class="input-field" />
                </view>
            </view>

            <!-- 生命历程部分 -->
            <view v-if="currentStep === 1" class="section">
                <view class="section-header">
                    <text class="section-title">生命历程</text>
                </view>

                <!-- 生命阶段标签页导航 -->
                <view class="life-stage-tabs">
                    <view v-for="(stage, index) in lifeStages" :key="index" class="life-stage-tab"
                        :class="{ 'active': currentLifeStage === index }" @click="selectLifeStage(index)">
                        <text>{{ stage.title.split('（')[0] }}</text>
                    </view>
                </view>

                <view class="stage-content">
                    <text class="stage-subtitle">{{ lifeStages[currentLifeStage].title }}</text>



                    <!-- 问题列表 -->
                    <view class="question-list">
                        <view v-for="(question, index) in lifeStages[currentLifeStage].questions" :key="index"
                            class="question-card" :class="{ 'active': currentQuestionIndex === index }"
                            @click="selectQuestion(index)">
                            <text class="question-text">{{ question.text }}</text>
                            <!-- <view class="answer-container">
                                <textarea v-model="question.answer" placeholder="点击录音按钮开始回答，或直接在此输入..."
                                    class="answer-input" ></textarea>
                            </view> -->
                        </view>
                    </view>
                </view>
            </view>

            <!-- 五道人生部分 -->
            <view v-if="currentStep === 2" class="section">
                <view class="section-header">
                    <text class="section-title">五道人生</text>
                    <text class="section-subtitle">表达您的心声</text>
                </view>



                <!-- 五道人生问题 -->
                <view class="five-questions-container">
                    <view v-for="(question, index) in fiveQuestions" :key="index" class="five-question-card">
                        <text class="five-question-title">{{ question.title }}</text>
                        <!-- <view class="five-question-form">
                            <input type="text" v-model="question.person" placeholder="想对谁说" class="input-field" />
                            <textarea v-model="question.content" placeholder="想说的话..." class="five-question-content" />
                        </view> -->
                    </view>
                </view>
            </view>

            <!-- 底部按钮 -->
            <view class="bottom-buttons">
                <view class="nav-button prev" @click="prevStep" v-if="currentStep > 0">
                    <text>上一步</text>
                </view>
                <view class="nav-button next" @click="nextStep" v-if="currentStep < steps.length - 1">
                    <text>下一步</text>
                </view>
                <view class="nav-button submit" @click="submitStory" v-if="currentStep === steps.length - 1">
                    <text>完成</text>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import NavBar from '@/components/NavBar.vue'

export default {
    components: {
        NavBar
    },
    data() {
        return {
            userName: '',
            steps: ['基本信息', '生命历程', '五道人生'],
            currentStep: 0,
            isRecording: false,
            recordingTime: '00:00',
            recordTimer: null,
            seconds: 0,
            currentQuestionIndex: 0,
            currentLifeStage: 0,
            basicInfo: {
                name: '',
                gender: '',
                age: '',
                birthplace: '',
                currentPlace: ''
            },
            lifeStages: [
                {
                    title: '童年阶段（出生到12岁）',
                    questions: [
                        { text: '家庭生活中最难忘的事情是？', answer: '' },
                        { text: '学校生活中印象最深刻的事情？', answer: '' },
                        { text: '个人成长中对你影响比较大的人/事情？', answer: '' },
                        { text: '提到童年，你还会想到什么？', answer: '' }
                    ]
                },
                {
                    title: '少年阶段（13-17岁）',
                    questions: [
                        { text: '家庭生活中最难忘的事情是？', answer: '' },
                        { text: '学校生活中印象最深刻的事情？', answer: '' },
                        { text: '个人成长中对你影响比较大的人/事情？', answer: '' },
                        { text: '提到少年时期，你还会想到什么？', answer: '' }
                    ]
                },
                {
                    title: '成年阶段（18-59岁）',
                    questions: [
                        { text: '聊聊你的大学生活', answer: '' },
                        { text: '聊聊你的工作经历', answer: '' },
                        { text: '聊聊你的家庭生活', answer: '' },
                        { text: '除了上面的问题，聊聊这个阶段对你重要的人和事吧', answer: '' }
                    ]
                },
                {
                    title: '老年阶段（60岁以后）',
                    questions: [
                        { text: '聊聊你的退休生活/老年生活', answer: '' },
                        { text: '你如何看待生老病死', answer: '' },
                        { text: '如果有机会重新活一次，你会想尝试哪些不同的事情', answer: '' },
                        { text: '你如何看待自己的一生', answer: '' }
                    ]
                }
            ],
            fiveQuestions: [
                { title: '【道谢】想感谢的人们', person: '', content: '' },
                { title: '【道歉】倾诉心中歉意', person: '', content: '' },
                { title: '【道爱】表达心中的爱', person: '', content: '' },
                { title: '【道别】亲口说声再见', person: '', content: '' },
                { title: '【道愿】诉说人生遗憾', person: '', content: '' }
            ],
            recorderManager: null
        };
    },
    onLoad() {
        // 从本地存储获取用户信息
        const userInfo = uni.getStorageSync('userInfo');
        if (userInfo && userInfo.isLoggedIn) {
            this.userName = userInfo.userName;
        }
    },
    methods: {
        // 切换步骤
        nextStep() {
            if (this.currentStep < this.steps.length - 1) {
                this.currentStep++;
                // 停止录音（如果正在录音）
                if (this.isRecording) {
                    this.stopRecording();
                }
            }
        },
        prevStep() {
            if (this.currentStep > 0) {
                this.currentStep--;
                // 停止录音（如果正在录音）
                if (this.isRecording) {
                    this.stopRecording();
                }
            }
        },

        // 生命历程阶段导航
        selectLifeStage(index) {
            if (index !== this.currentLifeStage) {
                // 停止录音（如果正在录音）
                if (this.isRecording) {
                    this.stopRecording();
                }
                this.currentLifeStage = index;
                this.currentQuestionIndex = 0;
            }
        },

        // 选择问题
        selectQuestion(index) {
            this.currentQuestionIndex = index;
        },

        // 录音控制
        toggleRecording() {
            if (this.isRecording) {
                this.stopRecording();
            } else {
                this.startRecording();
            }
        },
        startRecording() {
            // 开始录音

            this.isRecording = true;
            this.seconds = 0;

            // 开始计时
            this.recordTimer = setInterval(() => {
                this.seconds++;
                const minutes = Math.floor(this.seconds / 60);
                const remainingSeconds = this.seconds % 60;
                this.recordingTime = `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
            }, 1000);

            // uni.showToast({
            //     title: '开始录音',
            //     icon: 'none'
            // });
        },
        stopRecording() {
            // 停止录音
            this.isRecording = false;

            // 停止计时
            clearInterval(this.recordTimer);
            this.recordTimer = null;
            this.recordingTime = '00:00';
        },

        // 提交故事
        submitStory() {
            // 验证表单
            if (!this.validateForm()) {
                return;
            }

            // 构建故事数据
            const storyData = {
                basicInfo: this.basicInfo,
                lifeStages: this.lifeStages,
                fiveQuestions: this.fiveQuestions,
                timestamp: new Date().getTime()
            };

            // 保存故事数据（实际项目中应该发送到服务器）
            uni.setStorageSync('storyData', storyData);

            uni.showToast({
                title: '故事收集完成',
                icon: 'success',
                duration: 2000,
                success: () => {
                    // 跳转到个人故事页面
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/pages/lifeReview/personalStory'
                        });
                    }, 2000);
                }
            });
        },
        validateForm() {
            // 基本信息验证
            if (this.basicInfo.name.trim() === '') {
                uni.showToast({
                    title: '请填写姓名',
                    icon: 'none'
                });
                this.currentStep = 0;
                return false;
            }

            // 可以添加更多验证逻辑

            return true;
        }
    }
};
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #f8f8f8;
    background-image: linear-gradient(to bottom, rgba(232, 245, 233, 0.6), rgba(255, 255, 255, 0.9));
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.main-content {
    flex: 1;
    width: calc(100% - 60rpx);
    padding: 0rpx 30rpx;
    height: 84vh;
    position: relative;
    overflow-x: hidden;
}

/* 步骤指示器样式 */
.steps-indicator {
    display: flex;
    justify-content: space-between;
    margin: 40rpx 0 60rpx;
    position: relative;
    padding: 0 30rpx;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.steps-indicator::before {
    content: '';
    position: absolute;
    top: 35rpx;
    left: 70rpx;
    right: 70rpx;
    height: 4rpx;
    background: linear-gradient(to right, #d0e8d0, #2e8b57, #d0e8d0);
    z-index: 1;
    border-radius: 4rpx;
}

.step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    transition: transform 0.3s ease;
}

.step-item.current {
    transform: scale(1.1);
}

.step-number {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    background-color: #e0e0e0;
    color: #666;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34rpx;
    font-weight: bold;
    margin-bottom: 15rpx;
    transition: all 0.4s ease;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.step-number::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0.6;
}

.step-text {
    font-size: 30rpx;
    color: #666;
    transition: all 0.3s ease;
    text-align: center;
    width: 120rpx;
}

.step-item.active .step-number {
    background: linear-gradient(135deg, #2e8b57, #3cb371);
    color: white;
    box-shadow: 0 6rpx 15rpx rgba(46, 139, 87, 0.4);
}

.step-item.current .step-text {
    color: #1c6a3e;
    font-weight: bold;
    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
}

/* 部分内容样式 */
.section {
    background-color: white;
    border-radius: 20rpx;
    padding: 40rpx;
    margin-bottom: 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid rgba(46, 139, 87, 0.05);
    animation: sectionFadeIn 0.6s ease-out;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

@keyframes sectionFadeIn {
    from {
        opacity: 0;
        transform: translateY(30rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8rpx;
    background: linear-gradient(to right, #1c6a3e, #2e8b57, #3cb371);
}

.section-header {
    margin-bottom: 40rpx;
    border-bottom: 2rpx solid #e8f5e9;
    padding-bottom: 20rpx;
}

.section-title {
    font-size: 42rpx;
    font-weight: bold;
    color: #1c6a3e;
    margin-bottom: 15rpx;
    display: block;
}

.section-subtitle {
    font-size: 32rpx;
    color: #3cb371;
    display: block;
}

/* 表单样式 */
.form-container {
    display: flex;
    flex-direction: column;
    gap: 40rpx;
}

.input-field {
    height: 90rpx;
    border: 2rpx solid #d0e8d0;
    border-radius: 12rpx;
    padding: 0 30rpx;
    font-size: 32rpx;
    background-color: #fafffe;
    box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    position: relative;
}

.input-field:focus,
.input-field:hover {
    border-color: #2e8b57;
    box-shadow: inset 0 2rpx 6rpx rgba(46, 139, 87, 0.1), 0 0 8rpx rgba(46, 139, 87, 0.2);
    transform: translateY(-2rpx);
}

.radio-group {
    display: flex;
    align-items: center;
    margin: 10rpx 0;
}

.radio-label {
    font-size: 32rpx;
    color: #333;
    margin-right: 30rpx;
    font-weight: 500;
}

.radio-options {
    display: flex;
    gap: 40rpx;
}

.radio-option {
    padding: 15rpx 40rpx;
    border: 2rpx solid #d0e8d0;
    border-radius: 50rpx;
    font-size: 32rpx;
    color: #666;
    transition: all 0.3s;
}

.radio-option.selected {
    background-color: #2e8b57;
    color: white;
    border-color: #2e8b57;
    box-shadow: 0 4rpx 8rpx rgba(46, 139, 87, 0.3);
}

/* 录音控制器样式 */
.recorder-container {
    display: flex;
    align-items: center;
    margin: 20rpx 0 30rpx;
    padding: 30rpx 30rpx;
    background-color: #e8f5e9;
    border-radius: 16rpx;
    border: 1rpx solid rgba(46, 139, 87, 0.1);
    box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.3);
    border-left: 6rpx solid #2e8b57;
    transition: all 0.3s ease;
}

.recorder-container.compact {
    padding: 15rpx 20rpx;
    margin: 15rpx 0 20rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.2);
}

.recorder-container.global {
    position: sticky;
    top: 0;
    z-index: 100;
    margin: 0;
    padding: 20rpx 30rpx;
    background: linear-gradient(135deg, #1c6a3e 0%, #2e8b57 100%);
    border-left: none;
    border-radius: 0 0 20rpx 20rpx;
    box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.4);
    animation: slideDown 0.5s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.recorder-container.global .recorder-status,
.recorder-container.global .recorder-timer {
    color: white;
    text-shadow: 0 1rpx 3rpx rgba(0, 0, 0, 0.2);
}

.recorder-container.global .recorder-button {
    background-color: white;
    transform: scale(1.2);
    transition: all 0.3s ease;
}

.recorder-container.global .recorder-button:active {
    transform: scale(1.1);
}

.recorder-container.global .recorder-button .iconfont.icon-stop {
    font-size: 35rpx;
    margin-top: 10rpx;
    color: #1c6a3e;
}

.recorder-container.global .recorder-button .iconfont {
    font-size: 60rpx;
    color: #1c6a3e;
}

.recorder-controls {
    display: flex;
    align-items: center;
    width: 100%;
}

.recorder-button {
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
    background-color: #2e8b57;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 30rpx;
    box-shadow: 0 4rpx 8rpx rgba(46, 139, 87, 0.4);
    transition: all 0.3s;
    flex-shrink: 0;
}

.recorder-button:active {
    transform: scale(0.95);
    box-shadow: 0 2rpx 4rpx rgba(46, 139, 87, 0.3);
}

.recorder-button .iconfont {
    color: white;
    font-size: 61rpx;
    margin-bottom: 17rpx;
    font-weight: bold;
}

.recorder-button .iconfont .icon-mic {
    font-size: 30rpx;
}

.recorder-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.recorder-status {
    font-size: 30rpx;
    color: #1c6a3e;
    font-weight: 500;
    line-height: 1.4;
}

.recorder-timer {
    font-size: 36rpx;
    color: #1c6a3e;
    font-weight: bold;
    line-height: 1.4;
    margin-top: 8rpx;
}

/* 问题列表样式 */
.question-list {
    display: flex;
    flex-direction: column;
    gap: 40rpx;
}

.question-card {
    border-radius: 20rpx;
    padding: 30rpx;
    border-left: 6rpx solid #2e8b57;
    background-color: #f0f9f0;
    transition: all 0.3s ease;
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.question-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(46, 139, 87, 0.05) 0%, rgba(255, 255, 255, 0) 60%);
    pointer-events: none;
}

.question-card.active {
    border-left-color: #2e8b57;
    box-shadow: 0 8rpx 20rpx rgba(46, 139, 87, 0.3);
    background-color: #f0f9f0;
    transform: translateY(-5rpx);
}

.question-text {
    font-size: 32rpx;
    color: #1c6a3e;
    display: block;
    font-weight: 500;
    border-bottom: 2rpx dashed #d0e8d0;
    background-color: #f0f9f0;
    padding: 10rpx 0 20rpx 0;
    position: relative;
}

.question-text::after {
    content: '提示询问';
    position: absolute;
    right: 10rpx;
    bottom: 5rpx;
    font-size: 24rpx;
    color: #3cb371;
    font-weight: normal;
    opacity: 0.7;
}

.answer-container {
    background-color: white;
    border-radius: 12rpx;
    padding: 25rpx;
    border: 2rpx solid #d0e8d0;
    box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.03);
}

.answer-input {
    width: 100%;
    height: 200rpx;
    font-size: 32rpx;
    color: #333;
    line-height: 1.6;
}

/* 生命阶段标签页导航样式 */
.life-stage-tabs {
    display: flex;
    background-color: #f0f9f0;
    border-radius: 12rpx;
    margin: 20rpx 0;
    padding: 5rpx;
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
    width: 100%;
    overflow-x: hidden;
}

.life-stage-tab {
    padding: 15rpx 15rpx;
    font-size: 26rpx;
    color: #666;
    border-radius: 10rpx;
    margin: 5rpx;
    transition: all 0.3s;
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.life-stage-tab.active {
    background-color: #2e8b57;
    color: white;
    box-shadow: 0 2rpx 6rpx rgba(46, 139, 87, 0.3);
}

.stage-content {
    padding: 10rpx 0;
}

.stage-subtitle {
    font-size: 30rpx;
    color: #3cb371;
    margin-bottom: 15rpx;
    display: block;
    font-weight: 500;
}

/* 五道人生样式 */
.five-questions-container {
    display: flex;
    flex-direction: column;
    gap: 40rpx;
    margin-top: 20rpx;
}

.five-question-card {
    background-color: #f9fdf9;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid rgba(46, 139, 87, 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.five-question-card:hover {
    transform: translateY(-5rpx);
    box-shadow: 0 12rpx 24rpx rgba(46, 139, 87, 0.15);
}

.five-question-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 80rpx;
    height: 80rpx;
    background: linear-gradient(135deg, #2e8b57 0%, #3cb371 100%);
    border-radius: 0 0 0 100%;
    opacity: 0.8;
    z-index: 1;
}

.five-question-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #1c6a3e;
    display: block;
    border-bottom: 2rpx solid #d0e8d0;
    padding-bottom: 20rpx;
    margin-bottom: 20rpx;
    position: relative;
    z-index: 2;
}

.five-question-form {
    display: flex;
    flex-direction: column;
    gap: 40rpx;
}

.five-question-content {
    width: 100%;
    height: 220rpx;
    border: 2rpx solid #d0e8d0;
    border-radius: 12rpx;
    padding: 25rpx;
    font-size: 32rpx;
    background-color: white;
    line-height: 1.6;
    box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.03);
}

/* 底部按钮样式 */
.bottom-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 70rpx;
    padding-bottom: 50rpx;
    padding-top: 20rpx;
    position: relative;
}

.bottom-buttons::before {
    content: '';
    position: absolute;
    top: -20rpx;
    left: 0;
    right: 0;
    height: 1rpx;
    background: linear-gradient(to right, transparent, rgba(46, 139, 87, 0.3), transparent);
}

.nav-button {
    padding: 25rpx 60rpx;
    border-radius: 50rpx;
    font-size: 36rpx;
    text-align: center;
    box-shadow: 0 6rpx 12rpx rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.nav-button::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.nav-button:active::after {
    opacity: 1;
    transform: scale(1);
}

.nav-button:active {
    transform: translateY(4rpx);
    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}

.nav-button.prev {
    background-color: #f0f0f0;
    color: #666;
    border: 2rpx solid #d0e8d0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-button.prev::before {
    /* content: '←'; */
    margin-right: 10rpx;
    font-weight: bold;
}

.nav-button.next {
    background: linear-gradient(to right, #2e8b57, #3cb371);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-button.next::after {
    content: '→';
    margin-left: 10rpx;
    font-weight: bold;
}

.nav-button.submit {
    background: linear-gradient(to right, #1c6a3e, #2e8b57);
    color: white;
    font-weight: bold;
    padding: 25rpx 70rpx;
    letter-spacing: 5rpx;
    position: relative;
    overflow: hidden;
}

.nav-button.submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    to {
        left: 100%;
    }
}
</style>